<template>
  <div class="page-container">
    <el-card shadow="none">
      <el-form inline>
        <el-form-item>
          <el-input v-model="searchParams.name" placeholder="输入角色名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="table-box">
        <el-table
          v-loading="loading"
          :data="tableData"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          @selection-change="onSelect"
        >
          <el-table-column type="index" width="80px" label="序号" align="center" />
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            align="center"
          />
          <el-table-column label="操作" width="120px" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="dialogRel(scope.row)"
              >关联资源</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-box">
        <el-pagination
          background
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>
    </el-card>
    <RelPermission ref="relForm" title="授予权限" />
  </div>
</template>

<script>
import crud from '@/mixins/crud'
import { http_role } from '@/api'
import { dict_roleType } from '@/dict'
import RelPermission from './relPermissionForm'
export default {
  components: { RelPermission },
  mixins: [crud],
  data() {
    return {
      request: http_role,
      searchParams: {
        name: ''
      },
      tableData: [
      ],
      columns: [
        { prop: 'code', label: '角色编码', width: '', minWidth: '' },
        { prop: 'name', label: '角色名称', width: '', minWidth: '' },
        { prop: 'level', label: '角色级别', width: '', minWidth: '' },
        { prop: 'description', label: '角色描述', width: '', minWidth: '' },
        { prop: 'typeName', label: '类型', width: '', minWidth: '' }
      ]
    }
  },
  methods: {
    formatTableData(data) {
      data.forEach(v => {
        v.typeName = dict_roleType[v.type]
      })
    },
    dialogRel(item) {
      this.$refs.relForm.open(item)
    }
  }
}

</script>

<style lang="scss">
.page-container {
  height: 100%;
}
</style>
